/**
 * 全局公共钩子函数
 */
import { ref, onUnmounted, computed } from 'vue'
import dayjs from 'dayjs'
// 导入监控方法
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
// 需求:
// 1. 通过useObserve函数可以实现对元素或组件是否进入可视区的监控
// 2.进入可视区后发送请求
export function useObserve (apiFn) {
  // 监控元素或组件是否进入可视区
  /**
     * 步骤：
     * 1. 通过ref获取要监控的元素或组件
     * 2. 调用useIntersectionObserver(要监控的元素DOM对象或组件实例, 监控的回调函数)=》多次触发
     *    说明：监控函数执行完，可以解构出stop方法=》停止监控
     */
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      console.log('监控回调函数：', isIntersecting)
      if (isIntersecting) {
        console.log('进入可视区了，发请求')
        // 发请求(动态)
        apiFn()
        // 注意：发送完，立即关闭监听=》避免多次发送
        // 关闭监控
        stop()
      }
    },
    // 进入当前元素可视区域的比例是多少才执行回调 0-1 值越大 代表需要进入的面积越大
    { threshold: 0 } // 进入后立马触发
  )
  // 返回获取监控元素的变量
  return { target }
}

// 倒计时
/**
 *
 * @param {*} time 倒计时的秒数
 * @returns
 */
export function useCountDown (time) {
  const countTime = ref(0)

  // 计算属性基于现在的countTime做一个转换处理
  const countTimeText = computed(() => {
    // 完成转换逻辑
    return dayjs.unix(countTime.value).format('mm分ss秒')
  })

  const { pause, resume } = useIntervalFn(() => {
    /* your function */
    // 自减逻辑
    countTime.value--
    // 到零停止
    if (countTime.value <= 0) {
      pause()
    }
  }, 1000, { immediate: false })

  // 开始计时方法
  function start (tm) {
    if (countTime.value === 0) {
      countTime.value = time || tm
    }
    resume()
  }

  // 清理一下定时器
  // 组件的卸载之后
  onUnmounted(() => {
    pause()
  })

  // console.log(pause, resume, isActive)
  return { countTime, start, pause, countTimeText }
}
